<template>
    <div>
        <el-card class="box-card" shadow="never">
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" :model="form" class="edit-el-form" :rules="rules" label-width="auto">
                        <el-row :gutter="160">
                           <el-col :span="12">
                              <el-form-item label="换新申请理赔人员短信模板ID" prop="template_id_one">
                                <el-input placeholder="用于换新申请给理赔人员发送短信" v-model="form.template_id_one"></el-input>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12">
                              <el-form-item label="换新申请理赔人员短信是否开启" prop="template_id_one_status">
                                <el-switch
                                   v-model="form.template_id_one_status"
                                   active-value='1'
                                   inactive-value='0'
                                   active-color="#13ce66"
                                   >
                                 </el-switch>
                               </el-form-item>
                           </el-col>
                        </el-row>
                        
                        <el-row :gutter="160">
                           <el-col :span="12">
                              <el-form-item label="审核未通过短信车主模板ID" prop="auto_audit">
                                <el-input placeholder="用于审核未通过给车主发送短信" v-model="form.template_id_two"></el-input>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12">
                              <el-form-item label="审核未通过车主短信是否开启" prop="auto_audit">
                                <el-switch
                                   v-model="form.template_id_two_status"
                                   active-value='1'
                                   inactive-value='0'
                                   active-color="#13ce66"
                                   >
                                 </el-switch>
                               </el-form-item>
                           </el-col>
                        </el-row>



                        <el-row :gutter="160">
                           <el-col :span="12">
                               <el-form-item label="审核通过短信车主模板ID" prop="auto_audit">
                                  <el-input placeholder="用于审核通过给车主发送短信" v-model="form.template_id_three"></el-input>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12">
                              <el-form-item label="审核通过车主短信是否开启" prop="auto_audit">
                                <el-switch
                                   v-model="form.template_id_three_status"
                                   active-value='1'
                                   inactive-value='0'
                                   active-color="#13ce66"
                                   >
                                 </el-switch>
                               </el-form-item>
                           </el-col>
                        </el-row>



                        <el-row :gutter="160">
                           <el-col :span="12">
                              <el-form-item label="审核通过店主短信模板ID" prop="auto_audit">
                                <el-input placeholder="用于审核通过给店主发送短信" v-model="form.template_id_four"></el-input>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12">
                              <el-form-item label="审核通过店主短信是否开启" prop="auto_audit">
                                  <el-switch
                                     v-model="form.template_id_four_status"
                                     active-value='1'
                                     inactive-value='0'
                                     active-color="#13ce66">
                                     </el-switch>
                              </el-form-item>
                           </el-col>
                        </el-row>


                        <el-row :gutter="160">
                           <el-col :span="12">
                               <el-form-item label="审核不通过店主短信模板ID" prop="auto_audit">
                                    <el-input placeholder="用于审核不通过给店主发送短信" v-model="form.template_id_five"></el-input>
                              </el-form-item>
                           </el-col>
                           <el-col :span="12">
                              <el-form-item label="审核不通过店主短信是否开启" prop="auto_audit">
                                <el-switch
                                   v-model="form.template_id_five_status"
                                   active-value='1'
                                   inactive-value='0'
                                   active-color="#13ce66"
                                   >
                                 </el-switch>
                               </el-form-item>
                           </el-col>
                        </el-row>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import { NoteInfo,NoteEdit } from '@/api/note.js'
    import Upload from '@/components/Upload.vue';
    export default {
        name:'Note',
        components:{ Upload },
        data() {
            let validateInt=(rule,value,callback)=>{
               let int_reg=/^([0-9]{1,})$/;
               let int_arr={
                  template_id_one:'模板ID',
                  template_id_two:'模板ID',
                  template_id_three:'模板ID',
                  template_id_four:'模板ID',
                  template_id_five:'模板ID'
               };
               let rule_name=int_arr[rule.field];
               if(value==''){
                  callback();
               }
               if(!int_reg.test(value) || value==0){
                  callback(new Error(rule_name+'必须为正整数'));
               }else{
                  callback();
               }
            }
            return {
                form: {
                   template_id_one: '',
                   template_id_one_status:'1',
                   template_id_two:'',
                   template_id_two_status:'1',
                   template_id_three:'',
                   template_id_three_status:'1',
                   template_id_four:'',
                   template_id_four_status:'1',
                   template_id_five:'',
                   template_id_five_status:'1'
                },
                rules:{
                    template_id_one:[
                        { validator:validateInt, trigger:"blur"}
                    ],
                    template_id_two:[
                        { validator:validateInt, trigger:"blur"}
                    ],template_id_three:[
                        { validator:validateInt, trigger:"blur"}
                    ],
                    template_id_four:[
                        { validator:validateInt, trigger:"blur"}
                    ],template_id_five:[
                        { validator:validateInt, trigger:"blur"}
                    ]
                },
                id:-1,
                content:'短信配置',
                loading:false,
                button_name:'立即提交',
            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                         that.confirmSubmit();
                    }else{
                        setTimeout(()=>{
                          const is_error=document.getElementsByClassName('is-error');
                          is_error[0].querySelector('input').focus();
                        },100);
                        return false;
                    }
                })
            },
            confirmSubmit(){
                this.loading=true;
                this.button_name='正在提交';
                var send_data={
                    template_id_one:this.form.template_id_one,
                    template_id_one_status:this.form.template_id_one_status,
                    template_id_two:this.form.template_id_two,
                    template_id_two_status:this.form.template_id_two_status,
                    template_id_three:this.form.template_id_three,
                    template_id_three_status:this.form.template_id_three_status,
                    template_id_four:this.form.template_id_four,
                    template_id_four_status:this.form.template_id_four_status,
                    template_id_five:this.form.template_id_five,
                    template_id_five_status:this.form.template_id_five_status
                };
                if(this.id!=-1){
                    send_data.id=this.id;
                }
                let that=this;
                NoteEdit(send_data).then(function(response){
                    let code=response.data.code;
                    let type=code==1?'success':'error';
                    that.$message({
                        message:response.data.msg,
                        type:type,
                        onClose:function(e){
                            that.loading=false;
                            that.button_name='立即提交';
                            if(code==1){
                               that.$router.push('/system/note');
                            }
                        }
                   })
                })
            },
            back(){
                this.$router.go(-1);
            }
        },
        created(){
            let that=this;
            NoteInfo().then(function(response){
                if(response.data.code==1){
                    that.id=response.data.info.id;
                    that.form.template_id_one=response.data.info.template_id_one;
                    that.form.template_id_two=response.data.info.template_id_two;
                    that.form.template_id_three=response.data.info.template_id_three;
                    that.form.template_id_four=response.data.info.template_id_four;
                    that.form.template_id_five=response.data.info.template_id_five;
                    that.form.template_id_one_status=response.data.info.template_id_one_status==undefined?'1':response.data.info.template_id_one_status.toString();
                    that.form.template_id_two_status=response.data.info.template_id_two_status==undefined?'1':response.data.info.template_id_two_status.toString();
                    that.form.template_id_three_status=response.data.info.template_id_three_status==undefined?'1':response.data.info.template_id_three_status.toString();
                    that.form.template_id_four_status=response.data.info.template_id_four_status==undefined?'1':response.data.info.template_id_four_status.toString();
                    that.form.template_id_five_status=response.data.info.template_id_five_status==undefined?'1':response.data.info.template_id_five_status.toString();
                }
            })
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
